<template>
  <div class="table">
    <el-table
      :data="dataTable"
      :header-cell-style="{ color: '#000', background: '#EEF5FE' }"
      height="100%"
      border
      empty-text="暂无数据"
      stripe
    >
      <el-table-column label="ID" align="center" prop="jobId" />
      <el-table-column label="名称" align="center" prop="jobName" />
      <el-table-column label="定时任务" align="center" prop="cronExpression" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column width="200" label="状态" align="center" prop="status">
        <template #default="{ row }">
          <el-tag v-if="row.status === '1'" type="success">启用</el-tag>
          <el-tag v-if="row.status === '2'" type="danger">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200" align="center">
        <template #default="{ row }">
          <el-button type="primary" @click="editFn(row)">编辑</el-button>
          <el-button v-if="row.status == 2" type="success" @click="shelves(row)"
            >启用</el-button
          >
          <el-button v-if="row.status == 1" type="danger" @click="shelves(row)"
            >停用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      v-model="dialogFormVisible"
      :title="'编辑'"
    >
      <el-form ref="ruleFormRefStag" :model="dialogForm" :rules="rules">
        <el-form-item prop="jobName" label="名称" :label-width="formLabelWidth">
          <el-input v-model="dialogForm.jobName" autocomplete="off" />
        </el-form-item>
        <el-form-item
          prop="cronExpression"
          label="定时任务"
          :label-width="formLabelWidth"
        >
          <el-input v-model="dialogForm.cronExpression" placeholder="30 10 9 * * *" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label=""
          :label-width="formLabelWidth"
        >
          <!-- tip -->
          <div>例如：30 10 9 * * *（表示每天的9点10分30秒执行一次）</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关闭</el-button>
          <el-button type="primary" @click="submitFormStag(ruleFormRefStag)"
            >确定</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import { editCronData, getCronListData } from "@/api/home.js";
import { ElMessage,ElMessageBox } from 'element-plus'

const props = defineProps({
  dataList: {
    type: Array,
    default: [],
  },
});
const dataTable = computed(() => props.dataList);
const dialogFormVisible = ref(false);
const formLabelWidth = "120px";
const dialogForm = reactive({
  jobName: "",
  cronExpression: "",
});
const rules = reactive({
  jobName: [{ required: true, message: "请输入名称", trigger: "blur" }],
  cronExpression: [
    { required: true, message: "请输入定时任务", trigger: "blur" },
  ],
});
const ruleFormRefStag = ref(null);

const getSearch = async () => {
  dataTable.value.length = 0
  const res = await getCronListData(dialogForm.value)
  if (res.code==0) {
    dataTable.value.push(...res.data)
  }
};
const submitFormStag = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      editCronData(dialogForm).then((res) => {
        if (res.code == 0) {
          ElMessage.success("修改成功");
          getSearch()
          dialogFormVisible.value = false;
        } else {
          ElMessage.error(res.message);
        }
      });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const editFn = (row) => {
  dialogFormVisible.value = true;
  Object.assign(dialogForm, row);
};

console.log(40, dataTable);
// 启用 停用
const shelves = async (row) => {
  ElMessageBox.confirm(
    `确定${row.status == "1" ? "停用" : "启用"}该定时任务吗?`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    row.status = row.status == "1" ? "2" : "1";
    Object.assign(dialogForm, row);
    editCronData(dialogForm).then((res) => {
      if (res.code == 0) {
        getSearch()
        ElMessage.success("修改成功");
      }else {
        ElMessage.error(res.message);
      }
    });
  });
};
</script>

<style lang="less" scoped>
.imgs {
  display: flex;
  flex-wrap: wrap;
  img {
    margin-right: 10px;
  }
}
</style>